<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 视界智检系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.29.3/index.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-left">
                <button class="back-btn" onclick="goBack()">
                    <i class="fas fa-arrow-left"></i>
                    返回主页
                </button>
                <h1>数据统计分析</h1>
            </div>
            <div class="header-right">
                <div class="last-update">
                    <i class="fas fa-clock"></i>
                    <span id="lastUpdateTime">加载中...</span>
                </div>
                <button class="refresh-btn" onclick="refreshData()">
                    <i class="fas fa-sync-alt"></i>
                    刷新数据
                </button>
            </div>
        </header>

        <!-- 时间范围选择器 -->
        <div class="time-selector">
            <div class="time-selector-group">
                <label>时间范围类型：</label>
                <select id="timeRangeType" onchange="toggleTimeRangeInputs()">
                    <option value="recent">最近时间</option>
                    <option value="custom">自定义时间</option>
                </select>
            </div>

            <!-- 最近时间选择 -->
            <div id="recentTimeGroup" class="time-selector-group">
                <label>时间单位：</label>
                <select id="timeUnit">
                    <option value="hours">小时</option>
                    <option value="days" selected>天</option>
                </select>
                <label>数量：</label>
                <input type="number" id="timeAmount" value="1" min="1" max="1000">
            </div>

            <!-- 自定义时间选择 -->
            <div id="customTimeGroup" class="time-selector-group" style="display: none;">
                <label>开始时间：</label>
                <input type="datetime-local" id="startTime">
                <label>结束时间：</label>
                <input type="datetime-local" id="endTime">
            </div>

            <!-- 重采样频率 -->
            <div class="time-selector-group">
                <label>数据粒度：</label>
                <select id="resampleMode" onchange="toggleResampleInputs()">
                    <option value="custom">自定义</option>
                    <option value="preset" selected>预设</option>
                </select>
                <span id="resamplePresetGroup" style="display:none;">
                    <select id="resamplePreset">
                        <option value="1min">每1分钟</option>
                        <option value="30min">每30分钟</option>
                        <option value="1h" selected>每小时</option>
                        <option value="2h">每2小时</option>
                        <option value="6h">每6小时</option>
                        <option value="12h">每12小时</option>
                        <option value="1D">每天</option>
                        <option value="1W">每周</option>
                        <option value="2W">每2周</option>
                        <option value="1M">每月</option>
                        <option value="3M">每3个月</option>
                        <option value="6M">每6个月</option>
                        <option value="1YE">每年</option>
                        <option value="10YE">每10年</option>
                    </select>
                </span>
                <span id="resampleCustomGroup" style="display:none;">
                    <input type="number" id="resampleValue" min="1" max="1000" value="1" style="width:80px;">
                    <select id="resampleUnit">
                        <option value="min">分钟</option>
                        <option value="h">小时</option>
                        <option value="D">天</option>
                        <option value="W">周</option>
                        <option value="M">月</option>
                        <option value="YE">年</option>
                    </select>
                </span>
            </div>

            <button class="apply-btn" onclick="applyTimeRange()">
                <i class="fas fa-search"></i>
                应用查询
            </button>
        </div>

        <!-- 加载指示器 -->
        <div id="loadingIndicator" class="loading-indicator" style="display: none;">
            <div class="spinner"></div>
            <span>正在加载数据...</span>
        </div>

        <!-- 基础统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-boxes"></i>
                </div>
                <div class="stat-content">
                    <h3>检测总数</h3>
                    <span class="stat-value" id="totalProcessed">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon success">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-content">
                    <h3>合格数量</h3>
                    <span class="stat-value" id="totalPassed">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon danger">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-content">
                    <h3>缺陷数量</h3>
                    <span class="stat-value" id="totalDefective">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-percentage"></i>
                </div>
                <div class="stat-content">
                    <h3>合格率</h3>
                    <span class="stat-value" id="passRate">0%</span>
                </div>
            </div>
        </div>

        <!-- 图表容器 -->
        <div class="charts-container">

            <!-- 第一行：数据摘要 & 合格/不合格分布 -->
            <div class="chart-row">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>数据摘要</h3>
                    </div>
                    <div class="chart-content">
                        <div class="data-summary">
                            <div class="summary-content">
                                <div class="summary-item">
                                    <span class="summary-label">查询时间范围：</span>
                                    <!-- <span id="summaryTimeRange">--</span> -->
                                    <span class="summary-value" id="summaryTimeRange">--</span>
                                </div>
                                <div class="summary-item">
                                    <span class="summary-label">数据粒度：</span>
                                    <!-- <span id="summaryResampleFrequency">--</span> -->
                                    <span class="summary-value" id="summaryResampleFrequency">--</span>
                                </div>
                                <div class="summary-item">
                                    <span class="summary-label">日志文件数量：</span>
                                    <!-- <span id="summaryLogFiles">--</span> -->
                                    <span class="summary-value" id="summaryLogFiles">--</span>
                                </div>
                                <div class="summary-item">
                                    <span class="summary-label">记录总数：</span>
                                    <!-- <span id="summaryTotalRecords">--</span> -->
                                    <span class="summary-value" id="summaryTotalRecords">--</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>合格/不合格分布</h3>
                        <div class="chart-controls">
                            <button class="chart-btn download-chart" onclick="saveChartImage('passFailPie')">
                                <i class="fas fa-download"></i>
                                保存图片
                            </button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <canvas id="passFailPieChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 第二行：缺陷类型分布 & 缺陷类型详情 -->
            <div class="chart-row">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>缺陷类型分布</h3>
                        <div class="chart-controls">
                            <div class="chart-type-selector">
                                <button class="chart-type-btn active" data-type="bar"
                                    onclick="switchChartType('bar', this)">
                                    <i class="fas fa-chart-bar icon"></i>
                                </button>
                                <button class="chart-type-btn" data-type="pie" onclick="switchChartType('pie', this)">
                                    <i class="fas fa-chart-pie icon"></i>
                                </button>
                                <button class="chart-type-btn" data-type="doughnut"
                                    onclick="switchChartType('doughnut', this)">
                                    <i class="fas fa-circle-notch icon"></i>
                                </button>
                            </div>
                            <button class="chart-btn download-chart" onclick="saveChartImage('defectType')">
                                <i class="fas fa-download"></i>
                                保存图片
                            </button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <canvas id="defectTypeChart"></canvas>
                    </div>
                </div>
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>缺陷类型详情</h3>
                        <div class="chart-controls">
                            <button class="chart-btn export-table" onclick="exportDefectData()">
                                <i class="fas fa-download"></i>
                                导出数据
                            </button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div class="table-container">
                            <table id="defectDetailTable" class="detail-table">
                                <thead>
                                    <tr>
                                        <th>缺陷类型</th>
                                        <th>数量</th>
                                        <th>占比</th>
                                    </tr>
                                </thead>
                                <tbody id="defectDetailTableBody">
                                    <!-- 数据将通过JavaScript填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三行：缺陷率时间趋势 -->
            <div class="chart-row">
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <h3>缺陷率时间趋势</h3>
                        <div class="chart-controls">
                            <button class="chart-btn download-chart" onclick="saveChartImage('defectTrend')">
                                <i class="fas fa-download"></i>
                                保存图片
                            </button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <canvas id="defectTrendChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 第四行：缺陷类型时间热力图 -->
            <div class="chart-row">
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <h3>缺陷类型时间热力图</h3>
                        <div class="chart-controls">
                            <select id="heatmapTimeUnit" onchange="updateHeatmap()">
                                <option value="hour">按小时</option>
                                <option value="day">按天</option>
                                <option value="week">按周</option>
                                <option value="month">按月</option>
                            </select>
                            <button class="chart-btn download-chart" onclick="saveChartImage('heatmap')">
                                <i class="fas fa-download"></i>
                                保存图片
                            </button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <canvas id="defectHeatmapChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 错误提示模态框 -->
        <div id="errorModal" class="modal" style="display: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>错误提示</h3>
                    <span class="close" onclick="closeErrorModal()">&times;</span>
                </div>
                <div class="modal-body">
                    <p id="errorMessage">发生了未知错误</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="closeErrorModal()">确定</button>
                </div>
            </div>
        </div>

        <script src="{{ url_for('static', filename='js/stats.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
        <script>
        // 请确保这里的URL是你的后端地址
        const socket = io('http://172.16.250.167:5000', {
            transports: ['websocket', 'polling']
        });

        socket.on('connect', () => console.log('✅ Stats 页面已连接 Socket.IO'));
        socket.on('connect_error', (err) => console.error('❌ Stats 页面 Socket.IO 连接失败:', err));

        socket.on('system_control', (msg) => {
            console.log('Stats 收到 system_control:', msg);
            // 当后端广播导航回主页时，模拟点击“返回主页”按钮
            if (msg.action === 'nav_home') {
            document.querySelector('.back-btn').click();
            }
        });
        </script>
</body>

</html>